
@import "../../../sass/normalize"
@import "../../../sass/mixin"
@import "icon"
@import "range"

// color
$color-main: #DF3A5E
$color-txt1: #666
$color-txt2: #999
$color-line1: #ebebeb
$color-line2: #e3e3e3
$color-link: #575E85
$color-info: #3198CC
$color-warning: #EB9D00
$color-error: #F44C4C
$color-success: #29AE39
$color-able: #acf98c

@import "pagination"

// class
.container
  +layout-container()
  position: relative

.row
  +gridle(row)

table.base
  +table



// 模块
mail-module-items
  .item
    cursor: move
    width: 120px
    height: 140px
    text-align: center
    border: 1px solid #eee
    border-radius: 10px
    box-shadow: 0 0 5px #ccc
    background: #fff
    display: inline-block
    .icon
      height: 110px
    .drag-show
      display: none

mail-module
  .sortable-container
    min-height: 20px
    position: relative
    .item
      position: relative
      &.sortable-ghost
        background: $color-able
        color: darken($color-able, 40%)
        border: 1px dashed darken($color-able, 40%)
        .drag-hide
          display: none
        .drag-show
          display: block
      &.empty
        position: absolute
        z-index: 0
        width: 100%
        text-align: center
      .bar
        display: none
        position: absolute
        top: 0
        left: 0
        width: 100%
        i
          float: right
          color: #666
          cursor: pointer
          padding: 5px
          font-size: 12px
          background: #fff
          &.drag-handle
            cursor: move
      &:hover
        .bar
          display: block

[data-is='mail-edit']
  .editor
    +gridle(6)
  .toolbox
    +gridle(6)
    .list-sortable-item
      cursor: move
    .font-set, .bg-set, .list-set, .size-set, .link-set
      +gridle(10 suffix 1 prefix 1)
      margin-bottom: 10px
    .border-set, .padding-set, .margin-set
      .top, .bottom, .right, .left
        +gridle(4 suffix 1 prefix 1)
    .section
      border-left: 1px solid #eee
      .tab
        list-style: none
        border-bottom: 1px solid #eee
        li
          display: inline-block
          padding: 3px 10px
          border: 1px solid #eee
          border-bottom: none
          margin: 0 5px
          cursor: pointer
          &.active
            background: #eee


// page
.mail-list
  h2
    padding: 20px
  table
    width: 90%
    margin: 0 5%

.mail-tpl
  ul
    list-style: none
    li
      padding: 8px
      border: 1px solid #fff
      display: inline-block
      margin: 0 10px
      &.active
        border-color: #ccc
      a
        display: block
